<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>比赛管理</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    .table {
        margin: auto;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="padding-top: 150px">
    <!-- Button trigger modal -->
    <div style="width: 100%;display: flex;justify-content: center;align-items:center;margin: 30px">
        <button id="add" type="button" class="btn btn-outline-primary btn-lg" data-toggle="modal"
                data-target="#exampleModalCenter">
            添加比赛
            <img id="aaa" th:src="@{/img/加.png}"
                 width="30px" height="30px;"
                 style="margin-bottom: 5px">
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">添加比赛</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container my-5">
                        <form action="/addMatch">
                            <div class="form-row">

                                <div>
                                    <label id="msg"></label>
                                </div>

                                <div class="form-group col-12">
                                    <label for="matchName">比赛名称：</label>
                                    <input type="text" id="matchName" placeholder="请输入比赛名称" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="matchTime">比赛时间：</label>
                                    <input type="datetime-local" id="matchTime" placeholder="请选择比赛时间"
                                           class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="matchAddress">比赛地点：</label>
                                    <input type="text" id="matchAddress" placeholder="请输入比赛地点" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="matchDesc">比赛介绍：</label>
                                    <textarea class="form-control" placeholder="请输入比赛介绍" name="matchDesc" id="matchDesc"
                                              cols="30" rows="5"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addMatch">确认添加</button>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-bordered" style="width: 80%;">
        <thead class="thead-light">
        <tr>
            <th scope="col">比赛名称</th>
            <th scope="col">比赛时间</th>
            <th scope="col">比赛地点</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="match : ${match}">
            <td th:text="${match.matchName}"></td>
            <td th:text="${match.matchTime}"></td>
            <td th:text="${match.matchAddress}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        $('#matchName').focus(function () {
            $('#msg').html("请继续输入")
        }).blur(function () {
            if ($('#matchName').val().length == 0) {
                $('#msg').html("<font color='red'><b>比赛名称不能为空</b></font>");
                return false;
            } else {
                $.ajax({
                    url: 'ifMatchName',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        "matchName": $('#matchName').val()
                    },
                    success: function (res) {
                        if (res) {
                            $("#addMatch").attr("disabled", "true");
                            $('#msg').focus().html("<font color='red'><b>已存在该比赛名称</b></font>");
                        } else {
                            $('#msg').html("请继续输入");
                            $("#addMatch").removeAttr("disabled");
                        }
                    }
                })
            }
        })

        $('#addMatch').click(function () {
            if ($('#matchName').val().length == 0) {
                $('#matchName').focus();
                $('#msg').html("<font color='red'><b>比赛名称不能为空</b></font>");
                return false;
            }
            if ($('#matchTime').val().length == 0) {
                $('#matchTime').focus();
                $('#msg').html("<font color='red'><b>比赛时间不能为空</b></font>");
                return false;
            }
            if ($('#matchAddress').val().length == 0) {
                $('#matchAddress').focus();
                $('#msg').html("<font color='red'><b>比赛地点不能为空</b></font>");
                return false;
            }
            var time = $('#matchTime').val().replace(/T/g, ' ').replace(/.[\d]{3}Z/, '');
            $.ajax({
                url: '/addMatch',
                type: 'POST',
                dataType: 'json',
                data: {
                    "matchName": $('#matchName').val(),
                    "matchTime": time,
                    "matchAddress": $('#matchAddress').val(),
                    "matchDesc": $('#matchDesc').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('新增比赛成功');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('新增比赛失败');
                        $('#exampleModalCenter').modal('hide')
                    }
                }
            })
        })
        $("#add").hover(function () {
            $("#aaa").css("content", "url(\"/img/加2.png\")");
        }, function () {
            $("#aaa").css("content", "url(\"/img/加.png\")");
        });
    });
</script>
</html>